<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>首页</h1>
      <p>企业成本管理系统数据概览</p>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ totalCost }}</div>
          <div class="stat-label">总成本金额</div>
        </div>
        <el-icon class="stat-icon money-icon"><Money /></el-icon>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ totalRecords }}</div>
          <div class="stat-label">成本记录数</div>
        </div>
        <el-icon class="stat-icon document-icon"><Document /></el-icon>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ departmentCount }}</div>
          <div class="stat-label">部门数量</div>
        </div>
        <el-icon class="stat-icon building-icon"><OfficeBuilding /></el-icon>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ pendingApprovals }}</div>
          <div class="stat-label">待审批记录</div>
        </div>
        <el-icon class="stat-icon todo-icon"><Check /></el-icon>
      </el-card>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-container">
      <!-- 部门成本分布 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>部门成本分布</span>
          </div>
        </template>
        <div class="chart-wrapper">
          <v-chart class="chart" :option="departmentCostOption" autoresize />
        </div>
      </el-card>
      
      <!-- 成本项目分析 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>成本项目分析</span>
          </div>
        </template>
        <div class="chart-wrapper">
          <v-chart class="chart" :option="costItemOption" autoresize />
        </div>
      </el-card>
      
      <!-- 成本趋势图 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>成本趋势分析</span>
          </div>
        </template>
        <div class="chart-wrapper">
          <v-chart class="chart" :option="costTrendOption" autoresize />
        </div>
      </el-card>
      
      <!-- 月度支出对比图 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>月度支出对比</span>
          </div>
        </template>
        <div class="chart-wrapper">
          <v-chart class="chart" :option="monthlyExpenseOption" autoresize />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { Money, Document, OfficeBuilding, Check } from '@element-plus/icons-vue'
import useDashboard from '@/hooks/useDashboard'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent
])

// 使用Dashboard Hook获取所有数据和方法
const {
  totalCost,
  totalRecords,
  departmentCount,
  pendingApprovals,
  departmentCostOption,
  costItemOption,
  costTrendOption,
  monthlyExpenseOption,

} = useDashboard()
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.page-header p {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

/* 统计卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-icon {
  font-size: 36px;
  opacity: 0.8;
}

.money-icon {
  color: #f56c6c;
}

.document-icon {
  color: #67c23a;
}

.building-icon {
  color: #409eff;
}

.todo-icon {
  color: #e6a23c;
}

/* 图表容器样式 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.chart-card.full-width {
  grid-column: 1 / -1;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-wrapper {
  height: 400px;
  padding: 10px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
  
  .chart-card.full-width {
    grid-column: 1;
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .chart-wrapper {
    height: 300px;
  }
}
</style>